<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>普通用户主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-5">
    <!-- Flash消息显示区域 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'success' if category == 'success' else 'danger' if category == 'error' else 'info' }} alert-dismissible fade show" role="alert">
                    <i class="bi bi-{{ 'check-circle' if category == 'success' else 'exclamation-triangle' if category == 'error' else 'info-circle' }}"></i>
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="text-center mb-4">
        <h2 class="text-primary">🌊 海洋牧场监控系统 - 用户视图</h2>
        <p class="lead">欢迎 {{ session.username }}，您可以查看以下数据：</p>
    </div>

    <!-- 功能导航卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-graph-up text-primary" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">数据可视化</h5>
                    <p class="card-text">查看鱼类数据分析和图表</p>
                    <a href="{{ url_for('data_visualization') }}" class="btn btn-primary">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-exclamation-triangle text-danger" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">报警设置</h5>
                    <p class="card-text">设置异常阈值和监控报警</p>
                    <a href="{{ url_for('alarm_settings') }}" class="btn btn-danger">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-robot text-success" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">智能问答</h5>
                    <p class="card-text">AI助手解答养殖问题</p>
                    <a href="{{ url_for('ai_chat') }}" class="btn btn-success">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-rulers text-info" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">体长预测</h5>
                    <p class="card-text">基于体重预测鱼类体长</p>
                    <a href="{{ url_for('fish_prediction') }}" class="btn btn-info">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 第二行功能导航卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-camera text-warning" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">图片识别</h5>
                    <p class="card-text">识别鱼类品种和状态</p>
                    <a href="{{ url_for('image_recognition') }}" class="btn btn-warning">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-map text-secondary" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">鱼类轨迹</h5>
                    <p class="card-text">追踪鱼类活动轨迹</p>
                    <a href="{{ url_for('fish_tracking') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-lightbulb text-success" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">养殖建议</h5>
                    <p class="card-text">智能养殖建议生成</p>
                    <a href="{{ url_for('farming_advice') }}" class="btn btn-success">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow h-100">
                <div class="card-body text-center">
                    <i class="bi bi-upload text-primary" style="font-size: 2rem;"></i>
                    <h5 class="card-title mt-2">数据上传</h5>
                    <p class="card-text">上传CSV数据文件</p>
                    <a href="{{ url_for('upload_file') }}" class="btn btn-primary">
                        <i class="bi bi-arrow-right"></i> 进入
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 实时数据展示 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow">
                <div class="card-body text-center">
                    <i class="bi bi-thermometer-half text-primary"></i>
                    <h5 class="card-title">🌡️ 水质数据</h5>
                    <p>水温: {{ temperature if temperature is not none else '未提供' }}℃</p>
                    <p>pH值: {{ ph_value if ph_value is not none else '未提供' }}</p>
                    <p>溶解氧: {{ dissolved_oxygen if dissolved_oxygen is not none else '未提供' }}mg/L</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card shadow">
                <div class="card-body text-center">
                    <i class="bi bi-fish text-success"></i>
                    <h5 class="card-title">🐟 鱼类活动</h5>
                    <p>当前鱼群数量: {{ fish_count if fish_count is not none else '未提供' }} 条</p>
                    <p>平均体重: {{ "%.1f"|format(avg_weight) if avg_weight is not none else '未提供' }} g</p>
                    <p>平均体长: {{ "%.1f"|format(avg_length) if avg_length is not none else '未提供' }} cm</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow">
                <div class="card-body text-center">
                    <i class="bi bi-cloud-sun text-warning"></i>
                    <h5 class="card-title">🌤️ 气候变化</h5>
                    <p>气温: {{ average_temperature if average_temperature is not none else '未提供' }}℃</p>
                    <p>风速: {{ wind_speed if wind_speed is not none else '未提供' }} m/s</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow">
                <div class="card-body text-center">
                    <i class="bi bi-gear text-secondary"></i>
                    <h5 class="card-title">📊 系统状态</h5>
                    <p><span class="badge bg-success">✅ 水质监测</span></p>
                    <p><span class="badge bg-success">✅ 鱼类识别</span></p>
                    <p><span class="badge bg-success">✅ 数据采集</span></p>
                    <p><span class="badge bg-success">✅ 预警系统</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-lightning"></i> 快速操作</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            <a href="{{ url_for('data_visualization') }}" class="btn btn-outline-primary w-100 mb-2">
                                <i class="bi bi-graph-up"></i><br>数据可视化
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('export_data') }}" class="btn btn-outline-success w-100 mb-2">
                                <i class="bi bi-download"></i><br>导出数据
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('alarm_settings') }}" class="btn btn-outline-danger w-100 mb-2">
                                <i class="bi bi-exclamation-triangle"></i><br>报警设置
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('ai_chat') }}" class="btn btn-outline-info w-100 mb-2">
                                <i class="bi bi-robot"></i><br>智能问答
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('fish_prediction') }}" class="btn btn-outline-warning w-100 mb-2">
                                <i class="bi bi-rulers"></i><br>体长预测
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('image_recognition') }}" class="btn btn-outline-dark w-100 mb-2">
                                <i class="bi bi-camera"></i><br>图片识别
                            </a>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ url_for('upload_file') }}" class="btn btn-outline-secondary w-100 mb-2">
                                <i class="bi bi-upload"></i><br>上传数据
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="text-center mt-4">
        <a href="{{ url_for('logout') }}" class="btn btn-outline-danger">退出登录</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 实时数据更新功能
function updateRealTimeData() {
    fetch('/api/realtime_data')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error('获取实时数据失败:', data.error);
                return;
            }
            
            // 更新水质数据
            if (data.water_quality) {
                const waterQualityCard = document.querySelector('.card-body:has(.bi-thermometer-half)');
                if (waterQualityCard) {
                    const tempElement = waterQualityCard.querySelector('p:nth-child(2)');
                    const phElement = waterQualityCard.querySelector('p:nth-child(3)');
                    const doElement = waterQualityCard.querySelector('p:nth-child(4)');
                    
                    if (tempElement) tempElement.textContent = `水温: ${data.water_quality.temperature}℃`;
                    if (phElement) phElement.textContent = `pH值: ${data.water_quality.ph}`;
                    if (doElement) doElement.textContent = `溶解氧: ${data.water_quality.dissolved_oxygen}mg/L`;
                }
            }
            
            // 更新鱼类数量
            if (data.fish_count) {
                const fishCard = document.querySelector('.card-body:has(.bi-fish)');
                if (fishCard) {
                    const countElement = fishCard.querySelector('p:nth-child(2)');
                    if (countElement) countElement.textContent = `当前鱼群数量: ${data.fish_count} 条`;
                }
            }
            
            // 更新系统状态
            if (data.system_status) {
                const systemCard = document.querySelector('.card-body:has(.bi-gear)');
                if (systemCard) {
                    const statusBadges = systemCard.querySelectorAll('.badge');
                    statusBadges.forEach(badge => {
                        if (data.system_status === 'normal') {
                            badge.className = 'badge bg-success';
                            badge.textContent = '✅ 正常运行';
                        } else {
                            badge.className = 'badge bg-warning';
                            badge.textContent = '⚠️ 注意';
                        }
                    });
                }
            }
        })
        .catch(error => {
            console.error('实时数据更新出错:', error);
        });
}

// 页面加载完成后开始实时更新
document.addEventListener('DOMContentLoaded', function() {
    // 立即更新一次
    updateRealTimeData();
    
    // 每30秒更新一次数据
    setInterval(updateRealTimeData, 30000);
    
    // 添加手动刷新按钮
    const refreshButton = document.createElement('button');
    refreshButton.className = 'btn btn-outline-primary btn-sm position-fixed';
    refreshButton.style.cssText = 'top: 20px; right: 20px; z-index: 1000;';
    refreshButton.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 刷新数据';
    refreshButton.onclick = updateRealTimeData;
    document.body.appendChild(refreshButton);
});
</script>

</body>
</html>
